<template>
  <div class="supervision-center">
    <div class="MidTitle">
      <span>基财e码通驾驶舱-资金监管
        <!-- <span style="color: #f6bd16;">(齐贤街道)</span> -->
        <el-select v-model="areaValue" placeholder="请选择" @change="gotoArea">
          <el-option
            v-for="item in areaOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </span>
    </div>
    <div class="MidTop">
      <div class="MidtopCon">
        <div v-for="(item, index) in midTopList" :key="index" class="MidTopBtn">
          <!-- <span class="MidTopBtn-titleM">{{ item.titleM }}:&nbsp;&nbsp;</span> -->
          <span>{{ item.num }}</span>
          <p>{{ item.title }}</p>
        </div>
        <span class="timeData">{{ gettime }} {{ week }}</span>
        <div class="danwei">单位：万元</div>
      </div>
    </div>
    <div class="MidMap">
      <div class="mapPic" style="height:100%">
        <!-- <map-echarts /> -->
        <img
          style="width:80%;height:80%"
          src="@/assets/images/fullscreen/齐贤.png"
          alt=""
        >
      </div>
    </div>
    <div class="MipTable">
      <!-- <div class="title">按月份风险统计数量</div> -->
      <!-- <VEcharts
        autoresize
        :options="option.options"
        style="width: 100%; height: 90%"
      /> -->
      <left-item
        v-for="(item, index) in list"
        :key="index"
        style="width:48%"
        :item="item"
      />
    </div>
  </div>
</template>

<script>
// import MapEcharts from './mapecharts';
// import VEcharts from '@/components/vecharts';
import LeftItem from './LeftItem';
import { getQueryBodyByProduce } from '@/api/dynamicInterface';
export default {
  components: {
    // VEcharts,
    // MapEcharts,
    LeftItem
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      midTopList: [
        {
          num: '53385.00',
          title: '资金',
          titleM: '公示率',
          ZD: 'ZJ'
        },
        {
          num: '0',
          title: '资产',
          titleM: '监管率',
          ZD: 'ZC'
        },
        {
          num: '-',
          title: '资源',
          titleM: '巡查率'
        }
      ],
      option: {
        title: '六大经济活动',
        options: {
          // title: {
          // text: '按月份风险统计数量',
          // subtext: '单位: 万元',
          // x: 100
          // },
          xAxis: {
            type: 'category',
            data: [
              '一月',
              '二月',
              '三月',
              '四月',
              '五月',
              '六月',
              '七月',
              '八月',
              '九月',
              '十月',
              '十一月',
              '十二月'
            ]
            // axisLine: {// x轴样式
            //   show: true,
            //   lineStyle: {
            //     color: '#00c7ff',
            //     width: 1,
            //     type: 'solid'
            //   }
            // }
            // splitLine: {
            //   show: false
            // }
          },
          yAxis: {
            type: 'value',
            // 去掉横向网格线
            splitLine: {
              show: false
            }
          },
          tooltip: {
            // 鼠标滑上去显示效果
            trigger: 'item'
          },
          grid: {
            show: false, // 是否显示直角坐标系网格
            top: 20, // 相对位置 top\bottom\left\right
            bottom: 30,
            left: 40,
            right: 40
            // containLabel: false // gird 区域是否包含坐标轴的刻度标签
            // tooltip: {
            //   show: true,
            //   trigger: 'item', // 触发类型
            //   textStyle: {
            //     color: '#666'
            //   }
            // }
          },
          series: [
            {
              data: [60, 70, 10, 80, 70, 75, 65, 12, 0, 0, 0, 0],
              // data: this.mouthData,
              type: 'bar',
              itemStyle: {
                normal: {
                  // 柱子颜色
                  color: ['#0C657D']
                }
              }
            }
          ]
        }
      },
      areaOptions: [
        {
          label: '浙江省',
          value: 1
        },
        {
          label: '绍兴市',
          value: 2
        },
        {
          label: '柯桥区',
          value: 3
        },
        {
          label: '齐贤街道',
          value: 4
        }
      ],
      areaValue: 4,
      gettime: '',
      week: '',
      timer: ''
      // colorArr: ['#9F2115', '#c1c919', '#37ca61']
    };
  },
  created() {
    this.getTime();
    this.getMiidList();
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
  methods: {
    gotoArea(val) {
      if (val === 1) {
        this.$router.push('/largeScreen1');
      } else if (val === 2) {
        this.$router.push('/largeScreen2');
      } else if (val === 3) {
        this.$router.push('/largeScreen3');
      } else if (val === 4) {
        this.$router.push('/largeScreen4');
      }
    },
    getTime() {
      const yy = new Date().getFullYear();
      const mm = this.getAddO(new Date().getMonth() + 1);
      const dd = this.getAddO(new Date().getDate());
      const hh = this.getAddO(new Date().getHours());
      const mf = this.getAddO(new Date().getMinutes());
      // let ss = this.getAddO(new Date().getSeconds());
      this.gettime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf;
      const wk = new Date().getDay();
      const weeks = [
        '星期日',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六'
      ];
      this.week = weeks[wk];
      this.timer = setTimeout(() => {
        this.getTime();
      }, 10000);
    },
    getAddO(a) {
      return a < 10 ? '0' + a : a;
    },
    getMiidList() {
      getQueryBodyByProduce({
        pageIndex: 0,
        pageSize: 100,
        tableId: 1027,
        pageType: 1
      }).then(res => {
        res.data.forEach(item => {
          if (item.DW === '齐贤街道') {
            this.midTopList.forEach(it => {
              if (it.ZD) {
                it.num = item[it.ZD];
              }
            });
          }
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
$vw: 1920px;
@function px2vw($px) {
  @return $px / $vw * 100vw;
}
.supervision-center {
  padding: px2vw(20px) 0;
}
.MidTitle {
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  /deep/.el-input__inner {
    background: transparent;
    border-color: transparent;
    color: #f6bd16;
    font-size: px2vw(32px);
    width: px2vw(200px);
  }
  span {
    font-size: px2vw(32px);
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    color: #1fd2ff;
  }
}
.MidTop {
  height: 8%;
  margin-top: px2vw(42px);
  display: flex;
  justify-content: center;
  position: relative;
  .timeData {
    position: absolute;
    color: #1fd2ff;
    right: 10%;
    top: -66%;
    font-size: px2vw(14px);
  }
  .danwei {
    position: absolute;
    color: #1fd2ff;
    right: 10%;
    top: -40%;
    font-size: px2vw(14px);
  }
  .MidtopCon {
    width: 66%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    .MidTopBtn {
      width: 32%;
      height: 100%;
      background-image: url("~@/assets/images/fullscreen/MidTop.png");
      background-size: 100% 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        font-size: px2vw(24px);
        padding-top: 2%;
        font-family: LiquidCrystal, LiquidCrystal-Regular;
        font-weight: 400;
        color: #f6bd16;
        text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);
      }
      p {
        margin: 0;
        font-size: px2vw(24px);
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        color: #1fd2ff;
        position: absolute;
        top: -30%;
        left: 50%;
        transform: translateX(-50%);
      }
      .MidTopBtn-titleM {
        color: #1fd2ff;
      }
    }
  }
}
.MidMap {
  height: 55%;
  position: relative;
  .mapPic {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mapAll {
    display: flex;
    align-items: center;
    position: absolute;
  }
  .mapBox {
    width: px2vw(18px);
    height: px2vw(18px);
    display: inline-block;
    border-radius: 2px;
  }
  span {
    font-size: px2vw(16px);
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    color: #ffffff;
    margin-left: px2vw(12px);
    display: inline-block;
  }
  .mapBot {
    width: px2vw(185px);
    height: px2vw(144px);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("~@/assets/images/fullscreen/状态球备份.png");
    background-size: 100% 100%;
    span {
      font-size: px2vw(34px);
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      color: #e9d500;
      text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
    }
    p {
      margin: 0;
      position: absolute;
      left: 50%;
      bottom: -12%;
      transform: translateX(-50%);
      font-size: px2vw(18px);
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      color: #1fd2ff;
    }
  }
}
.MipTable {
  height: calc(37% - 87px);
  // background-image: url('~@/assets/images/fullscreen/longKuang.png');
  // background-size: 100% 100%;
  // padding: 10px;
  display: flex;
  justify-content: space-between;
  .title {
    padding-left: 20px;
    height: 10%;
    color: #1fd2ff;
    font-size: 18px;
  }
}
</style>
